<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="250px">
        <Menu/>
      </el-aside>
      <el-container>
        <el-header class="header-container">
          <Header/>
        </el-header>
        <el-main>
          <div class="main-container">
            <router-view/>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import Menu from "@/components/home/Menu.vue";
import Header from "@/components/home/Header.vue";</script>

<style scoped>
.main-container {
  height: calc(100vh - 100px);
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

.common-layout {
  background-color: #fff;
  overflow: hidden;
}

.el-header {
  background-color: #fff;
  --el-header-height: 80px;
}

.el-aside {
  height: 100vh;
}

.el-main {
  padding: 10px;
  background-color: #eef1f5;
}
</style>
